<template>
	<NavBar :obj="{ title: '我的评价', color: '#000', backgroundColor: '#fff' }" />

	<view class="fill">
		<view class="show-load" v-if="showLoad" style="padding: 30upx">
			<up-loading-icon text="加载中" textSize="13"></up-loading-icon>
		</view>
		<view class="empty" style="padding-bottom: 20%" v-if="!list.length && !showLoad">
			<up-empty icon="/static/product/ic_zerodata@2x.png" iconSize="392upx" marginTop="50%" text="暂无评价" />
		</view>

		<view class="item" v-for="(item, index) in list" :key="index" v-if="mode == 1">
			<view class="user flex items-center justify-between">
				<view class="photo">
					<image :src="imgUrl + item.user?.photo"></image>
				</view>
				<view class="middle flex-1">
					<view class="nickname">{{ item.user?.nickname }}</view>
					<view class="rate">
						<up-rate v-model="item.score" :count="5" inactiveColor="#CECECE" activeColor="#FE7800" size="16"></up-rate>
					</view>
				</view>
				<view class="time">{{ item.create_time }}</view>
			</view>

			<view class="content">
				{{ item.content }}
			</view>

			<view class="images">
				<up-grid col="4" :border="false" gap="14rpx">
					<up-grid-item v-for="(baseListItem, baseListIndex) in item.images" :key="baseListIndex">
						<image :src="imgUrl + baseListItem" class="image" @click="showPreviewImage([imgUrl + baseListItem])"></image>
					</up-grid-item>
				</up-grid>
			</view>

			<view class="replay" v-if="item.reply_admin_name">
				<view class="replay-title">平台回复</view>
				<view class="replay-content">{{ item.reply_content }}</view>
			</view>

			<view class="product" @click="goUrl('/pages/product/details?id=' + item.pid)">
				<view class="spec" v-if="item.product?.spec">{{ item.product?.spec }}</view>
				<view class="flex items-center justify-between info">
					<image :src="imgUrl + item.product?.icon" class="icon"></image>
					<view class="flex-1">
						<view class="title line-1-clamp">{{ item.product?.title }}</view>
						<view class="price rmb-black">{{ item.product?.vip_price }}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="video-list" v-else>
			<up-row gutter="10rpx">
				<up-col span="6" v-for="(item, index) in list" :key="index">
					<view class="video-item" @click="goUrl('/pages/evaluate/evaluate-video?id=' + item.id)">
						<view class="fm-box">
							<image :src="item.video + '?vframe/jpg/offset/1'" class="fm"></image>
							<image src="/static/product/ic_cepbofbig.png" class="dsj-icon"></image>
						</view>

						<view class="content line-2-clamp">
							{{ item.content }}
						</view>
						<view class="user flex items-center">
							<view class="photo">
								<image :src="item.user?.photo"></image>
							</view>
							<view class="nickname flex-1">{{ item.user?.nickname }}</view>
						</view>
					</view>
				</up-col>
			</up-row>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, nextTick, inject } from 'vue';
	import { port, imgUrl, goUrl, hint, loading, closeLoading, showPreviewImage } from '../../service/port';
	import { onShow, onReachBottom, onPageScroll } from '@dcloudio/uni-app';

	const showLoad = ref(true);

	const condition = reactive([
		{ name: '商品评价', val: 1 },
		{ name: '达人测评', val: 2 }
	]);

	const list = ref([]);
	const page = ref(1);
	const mode = ref(1);

	const offsetTop = ref(0);
	onShow(() => {
		// #ifdef MP-WEIXIN
		offsetTop.value = inject('minTop');
		// #endif
		page.value = 1;
		list.value.length = 0;
		myEvaluateList();
	});

	async function myEvaluateList() {
		let res = await port('myEvaluateList', { page: page.value, mode: mode.value });
		showLoad.value = false;
		if (res.data.length) {
			list.value = [...list.value, ...res.data];
			page.value++;
		}
	}
	function conditionCah(e) {
		mode.value = e.val;
		page.value = 1;
		list.value.length = 0;
		showLoad.value = true;
		myEvaluateList();
	}
	onReachBottom(() => {
		myEvaluateList();
	});
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f4f5f8;
	}

	.fill {
		padding-bottom: 120rpx;
		.item {
			background: #ffffff;
			border-radius: 30rpx;
			padding: 30rpx;
			margin-top: 24rpx;

			.user {
				margin-bottom: 24rpx;
				.photo {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					background: #f2f2f2;
					> image {
						width: 99%;
						height: 99%;
						border-radius: 50%;
					}
				}
				.middle {
					margin-left: 12rpx;
					.nickname {
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
						margin-bottom: 5rpx;
					}
				}
				.time {
					font-weight: 400;
					font-size: 22rpx;
					color: #999999;
				}
			}
			.content {
				font-weight: 400;
				font-size: 26rpx;
				color: #000000;
				margin-bottom: 24rpx;
			}
			.images {
				margin-bottom: 24rpx;
				.image {
					width: 162rpx;
					height: 162rpx;
					border-radius: 18rpx;
				}
			}
			.replay {
				padding: 24rpx 0;
				border-top: 1rpx solid #eeeeee;
				.replay-title {
					font-weight: 500;
					font-size: 28rpx;
					color: #fb3204;
				}
				.replay-content {
					font-weight: 400;
					font-size: 26rpx;
					color: #000000;
				}
			}

			.product {
				.spec {
					font-weight: 400;
					font-size: 22rpx;
					color: #999999;
					margin-bottom: 23rpx;
				}
				.info {
					background: #f4f5f8;
					border-radius: 20rpx;
					.icon {
						width: 118rpx;
						height: 118rpx;
						border-radius: 20rpx;
					}
					.flex-1 {
						margin-left: 12rpx;
					}
					.title {
						font-weight: 400;
						font-size: 24rpx;
						color: #000000;
					}
					.price {
						font-weight: 500;
						font-size: 30rpx;
						color: #000000;
						margin-top: 15rpx;
					}
				}
			}
		}

		.video-list {
			margin: 24rpx;
			.video-item {
				background: #ffffff;
				border-radius: 18rpx;
				.fm-box {
					width: 100%;
					height: 336rpx;
					position: relative;
					.fm {
						width: 100%;
						height: 100%;
						border-radius: 18rpx;
					}
					.dsj-icon {
						position: absolute;
						width: 70rpx;
						height: 70rpx;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}

				.content {
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
					padding: 22rpx 18rpx;
				}
				.user {
					padding: 0 18rpx 20rpx 18rpx;
					.photo {
						width: 44rpx;
						height: 44rpx;
						border-radius: 50%;
						> image {
							width: 99%;
							height: 99%;
							border-radius: 50%;
						}
					}
					.nickname {
						font-weight: 400;
						font-size: 20rpx;
						color: #666666;
						margin-left: 12rpx;
					}
				}
			}
		}
	}
</style>
